<template>
    <div>
    <div class="mld-toolbar" style="margin-bottom:10px;display:flex;">
        <div style="display:flex;flex:2;justify-content:flex-start;padding-left: 20px;">
            <div><span style="font-weight: 700;">所属角色：</span><span>{{params.name}}</span></div>
        </div>
        <div style="display:flex;flex:1;justify-content:flex-end;">
          <Button v-has="'admin,sys:rbac:saveAdminRole'" shape="circle" type="primary" icon="md-add" @click="openAdd(vm)">添加成员</Button>
        </div>
      </div>
     <Table
     @on-selection-change='handleSelectionChange(...arguments, vm)'
     :loading="loading" stripe :columns="columns" :data="tableData"></Table>
      <Page class="mld-page"
      :current='pageIndex'
      :page-size='pageSize'
      @on-change='handlePageIndexChange(...arguments, vm)'
      @on-page-size-change='handlePageSizeChange(...arguments, vm)'
      show-total
      show-elevator
      show-sizer
      transfer
      style="margin-top:10px;"
      :prev-text="vm.$t('prev-text')" :next-text="vm.$t('next-text')" :total="recordCount"></Page>
    </div>
</template>

<script>
import handleBtns from './handle-btns'
import methods from './methods-user-role'
export default {
  components: {
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      modalAdd: true,
      searchable: false,
      fullscreen: false,
      loading: false,
      pageIndex: this.$config.pageIndex,
      pageSize: this.$config.pageSize,
      recordCount: 0,
      selection: [],
      columns: [
        {
          title: '登录名',
          key: 'userName',
          render: (h, params) => {
            return h('div', params.row.userName)
          }
        },
        {
          title: '姓名',
          key: 'realName',
          render: (h, params) => {
            return h('div', params.row.realName)
          }
        },
        {
          title: this.$t('handle'),
          width: 60,
          key: 'handle',
          align: 'center',
          render: (h, params) => {
            return h('div', handleBtns.map(item => item(h, params, this)))
          }
        }
      ],
      tableData: []
    }
  },
  created () {
    this.vm = this
  },
  methods: Object.assign({}, methods, {
    // ...methods,
  }),
  watch: {
    'params.id' (n, o) {
      this.requestData(this)
    }
  },
  mounted () {
    this.requestData(this)
  }
}
</script>

<style>
</style>
